<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核销统计</title>
    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/footable/footable.core.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    
</head>

<body class="gray-bg" id="content">
    <div class="wrapper wrapper-content">
        <div class="ibox-content col-md-12">
            <form class="form-horizontal">
            
                <div class="col-sm-3">
                	<div class="btn-group">
					    <button class="btn btn-primary" type="button">日</button>
					    <button class="btn btn-white" type="button">周</button>
					    <button class="btn btn-white" type="button">月</button>
					    <button class="btn btn-white" type="button">年</button>
					    <button class="btn btn-white" type="button">自定义</button> 
					</div>
                </div>
            
                <div class="form-group col-sm-3" id="data_5">
                    <div class="input-daterange input-group">
			            <input type="text" class="input-sm form-control" name="datetimepicker_start" readonly disabled style="background-color: white;height:34px;">
			            <span class="input-group-addon" style="background-color: #eeeeee;">到</span>
			            <input type="text" class="input-sm form-control" name="datetimepicker_end" readonly disabled style="background-color: white;height:34px;">
			        </div>
                </div>  
                  
                <div class="col-sm-3">
                    <div class="input-group">
                        <input id="keyWord" type="text" placeholder="按名称搜索" class="input form-control">
                        <span class="input-group-btn">
                            <button onclick="init()" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
                        </span>
                    </div>
                </div>
               <div class="col-sm-3">
               		<shiro:hasPermission name="operate_electronic_coupons_manage:export_count">
                    <button onclick="javascript:exportPdf();" class="btn btn-primary pull-right" type="button">导出</button>
               		</shiro:hasPermission>
                </div>
            </form>
            
             
        </div>  
        <div class="ibox-content col-md-12" style="margin-top:10px">
           <div class="col-sm-12">
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
            </div>
         </div>
         
          <div class="ibox-content col-md-12" style="margin-top:10px">
           <div class="col-sm-12">
                <div class="ibox float-e-margins">
             
                    <div class="echarts" id="container"></div>
                </div>
            </div>
         </div>
    </div>

    <script src="<%=path%>/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=path%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="<%=path%>/hplus/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="<%=path%>/hplus/js/plugins/switchery/switchery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/hplus/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/clockpicker/clockpicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/cropper/cropper.min.js"></script>
    
<%--     <script src="<%=path%>/hplus/js/demo/form-advanced-demo.min.js"></script> --%>
	<script src="<%=path%>/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>

    <script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script src="<%=path%>/hplus/js/plugins/echarts/echarts-all.js"></script>
	<script type="text/javascript" src="<%=path%>/js/system/html2canvas.js"></script>
    <script type="text/javascript" src="<%=path%>/js/system/jspdf.debug.js"></script>
    <script type="text/javascript"  src="<%=path%>/js/system/province-city-area-data.js?32434"></script>

    <script type="text/javascript">
// 	    $('.switchBtn').on('click',function(){
// 	    	$('.switchBtn').removeClass("btn-primary");
// 	    	$('.switchBtn').addClass("btn-white");
// 	    	$(this).removeClass("btn-white");
// 	    	$(this).addClass("btn-primary");
// 	    });
// 	    function refreshStatistics(time_Type){
	    	/*
	    	var myDate = new Date();
        	//获取当前年
        	var year=myDate.getFullYear();
        	//获取当前月
        	var month=myDate.getMonth()+1;
        	var beforeMonth=myDate.getMonth();
        	//获取当前日
        	var day=myDate.getDate(); 
        	var beforeYear=year-1;
	    	
	    	switch (time_Type) {
			case "hour":
				$("#start_time").val(year+"-"+month+"-"+day);
				$("#end_time").val(year+"-"+month+"-"+day);
				countByHour();
				break;
			case "week":
				var tempDay=day-7;
				$("#end_time").val(year+"-"+month+"-"+day);
				if(tempDay<1){
					month=month-1;
					day=30-(7-day);
				}
				if(month==0){
					month=12;
	        		year=year-1;
	        	}
				$("#start_time").val(year+"-"+month+"-"+day);
				countByWeek();
				break;
			case "month":
				$("#end_time").val(year+"-"+month+"-"+day);
				if(beforeMonth==0){
	        		year=year-1;
	        		beforeMonth=12;
	        	}
				$("#start_time").val(year+"-"+beforeMonth+"-"+day);
				countByMonth();
				break;
			case "year":
				$("#start_time").val(beforeYear+"-"+month+"-"+day);
				$("#end_time").val(year+"-"+month+"-"+day);
				countByYear();
				break;

			default:
				break;
			}
	    	timeType=time_Type
	    	countByCity(time_Type);
	    	*/
// 	    }
	    
    </script>
  
    <script>
<%--         var path = "<%=path%>"; --%>
//         var keyWord="";
//         var startTime="";
//         var endTime="";
//         var titleArr=new Array();
//         var startIndex=0;
//         var pageSize=6;
//         var timeType="hour";
//         var keyWord="";
        
        
//         $(function(){
//         	init();
//         });


//         function init(){
//         	initDate()
//         	//initHistogram();
//         	countByCity("hour");
//         	//countByWeek();
//         	countByHour();
//         }
        
        /*
        function initDate(){
        	var myDate = new Date();
        	//获取当前年
        	var year=myDate.getFullYear();
        	//获取当前月
        	var month=myDate.getMonth()+1;
        	var beforeMonth=myDate.getMonth();
        	var beforeYear=year;
        	//获取当前日
        	var day=myDate.getDate(); 
        	if(month>12){
        		year=year+1;
        		month=1;
        	}
        	if(beforeMonth==0){
        		beforeMonth=12;
        		beforeYear=beforeYear-1;
        	}
        	
        	$("#end_time").val(year+"-"+month+"-"+day);
        	$("#end_time").attr("value",year+"-"+month+"-"+day);
        	$("#start_time").val(year+"-"+month+"-"+day);
        	$("#start_time").attr("value",year+"-"+month+"-"+day);
        	
        	$("#start_time").datepicker("setDate",year+"-"+month+"-"+day);
        	$("#end_time").datepicker("setDate",year+"-"+month+"-"+day);  
        	$("#start_time").attr("value",beforeYear+"-"+beforeMonth+"-"+day);
        	$("#start_time").val(beforeYear+"-"+beforeMonth+"-"+day);
        }
        */
        
        
//         function countBySearch(){
//         	keyWord=$('#keyWord').val();
//         	startTime=$('#start_time').val();
//         	endTime=$('#end_time').val();
//         	countByCity("");
//         	var url=path+"/coupon/ajaxCountCouponGroupWhere"
//         	$.post(url, {
// 				"keyWord":keyWord,
// 				"startTime":startTime,
// 				"endTime":endTime,
// 			}, function(data) {
// 				console.log("data-------->"+data.data);
// 				if (data.status == 200) {
// 					initHistogram(data.data);
// 				} else if(data.message=="20028"){
// 					loginDialog();
// 				}else {
// 					initHistogram(null);
// 				}
// 			});
//         }
        
        
//         function countByCity(timeType){
//         	var url=path+"/coupon/ajaxCountCouponGroupWhere"
//         	var param={}
//         	param.cid=cid;
//         	param.uid=uid;
//         	param.access_token=access_token;
//         	param.startIndex=startIndex;
//         	param.pageSize=pageSize;
//         	param.timeType=timeType;
//         	param.startTime=startTime;
//         	param.endTime=endTime;
//         	$.post(url, param, function(data) {
// 				if (data.status == 200) {
// 					initCircular(data.data);
// 				} else if(data.message=="20028"){
// 					loginDialog();
// 				}else {
// 					initCircular(null);
// 				}
// 			});
//         }
//         function countByHour(){
//         	var url=path+"/verification/ajaxCountByHour"
//         	$.post(url, {
// 				"cid" : cid,
// 				"uid" : uid,
// 				"access_token" : access_token,
// 			}, function(data) {
// 				if (data.status == 200) {
// 					initHistogram(data.data);
// 				} else if(data.message=="20028"){
// 					loginDialog();
// 				}else {
// 					initHistogram(null);
// 				}
// 			});
//         }
        
//         function countByWeek(){
//         	var url=path+"/verification/ajaxCountByWeek"
//         	$.post(url, {
// 				"cid" : cid,
// 				"uid" : uid,
// 				"access_token" : access_token,
// 			}, function(data) {
// 				if (data.status == 200) {
// 					initHistogram(data.data);
// 				} else if(data.message=="20028"){
// 					loginDialog();
// 				}else {
// 					initHistogram(null);
// 				}
// 			});
//         }
//         function countByMonth(){
//         	console.log("month--->"+timeType);
//         	var url=path+"/verification/ajaxCountByMonth"
//         	$.post(url, {
// 				"cid" : cid,
// 				"uid" : uid,
// 				"access_token" : access_token,
// 			}, function(data) {
// 				if (data.status == 200) {
// 					initHistogram(data.data);
// 				} else if(data.message=="20028"){
// 					loginDialog();
// 				}else {
// 					initHistogram(null);
// 				}
// 			});
//         }
//         function countByYear(){
//         	var url=path+"/verification/ajaxCountByYear"
//         	$.post(url, {
// 				"cid" : cid,
// 				"uid" : uid,
// 				"access_token" : access_token,
// 			}, function(data) {
// 				if (data.status == 200) {
// 					initHistogram(data.data);
// 				} else if(data.message=="20028"){
// 					loginDialog();
// 				}else {
// 					initHistogram(null);
// 				}
// 			});
//         }
        
        
        function initHistogram(data){
        	var columnArr=new Array();
        	var valueArr=new Array();
        	for(var i in data){
        		if(timeType=="month"){
        			var splitArr=data[i].columnNo.split('-');
            		if(StringEmpty(splitArr[2])&&splitArr[2]!='undefined'){
            			console.log(splitArr[2]);
            			columnArr.push(splitArr[2]);
                		valueArr.push(data[i].value);
            		}
        		}else{
        			columnArr.push(data[i].columnNo);
            		valueArr.push(data[i].value);
        		}
        	}
        	var myChart = echarts.init(document.getElementById('echarts-bar-chart'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '柱状图',
                    x:'left'
                },
                tooltip: {},
                
                xAxis: {
                    data: columnArr
                },
                yAxis: {},
                series: [{
 //                   name: '销量',
                    type: 'bar',
                    data: valueArr
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        
        function initCircular(data){
        	var dom = document.getElementById("container");
        	var myChart = echarts.init(dom);
        	var app = {};
        	option = null;
        	option = {
        	    title : {
        	        text: '城市占比',
        	        subtext: '',
        	        x:'left'
        	    },
        	    tooltip : {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
        	    },
        	    
        	    series : [
        	        {
        	            name: '',
        	            type: 'pie',
        	            radius : '55%',
        	            center: ['50%', '60%'],
        	            data:data,
        	            itemStyle: {
        	                emphasis: {
        	                    shadowBlur: 10,
        	                    shadowOffsetX: 0,
        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                }
        	            }
        	        }
        	    ]
        	};
        	;
        	if (option && typeof option === "object") {
        	    myChart.setOption(option, true);
        	}

        }
        
        
      //导出pdf方法
   	 function exportPdf(){
   		 
              $('.s_index').hide(); 	//日历页面隐藏
              $('.s_activity').show(); //活动页面隐藏
              $('.s_clue').show();  	//线索页面展示
              $('#dhhead').hide();     //导航栏隐藏
              $('#dbdhtz').hide();     //底部导航跳转隐藏
              $('#xsfxdh').hide();     //线索分析导航隐藏
              $('#ckxsButton').hide(); //查看线索按钮隐藏
              $('#ckhdButton').hide(); //查看活动按钮隐藏
              
   		   html2canvas(document.getElementById("content"), {
   		   onrendered: function(canvas) {

   		   //通过html2canvas将html渲染成canvas，然后获取图片数据
   		   var imgData = canvas.toDataURL('image/jpeg');

   		   //初始化pdf，设置相应格式
   		   var doc = new jsPDF("p", "mm", "a4");

   		   //这里设置的是a4纸张尺寸
   		   doc.addImage(imgData, 'JPEG', 0, 0,210,297);

   		   //输出保存命名为content的pdf
   		   doc.save('核销统计.pdf');
   		   },
   		  	//导出的pdf默认背景颜色为黑色，所以要设置颜色为白（根据自己的需求设置）
   		   background: '#FFF'
   		 });
   		   $('#dbdhtz').show();      //底部导航跳转展示
   		   $('#dhhead').show();      //导航栏展示
              $('.s_index').show(); 	 //日历页面展示
              $('.s_activity').hide();  //活动页面隐藏
              $('.s_clue').hide();  	 //线索页面展示
              $('#xsfxdh').show();      //线索分析导航展示
              $('#ckxsButton').show();  //查看线索按钮打开
              $('#ckhdButton').show();  //查看活动按钮展示
   	 }
        
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
<script type="text/javascript">
var path = "<%=path%>";
var startTime = "";
var endTime = "";
var groupBy = "hour";	//按照哪个条件分组

$(function(){
	var now = new Date();
	startTime = now.Format("yyyy-MM-dd");
	endTime = now.Format("yyyy-MM-dd");
	$("input[name='datetimepicker_start']").val(startTime.split(" ")[0]);
	$("input[name='datetimepicker_end']").val(endTime.split(" ")[0]);
	
	$("input[name='datetimepicker_start']").datetimepicker({language:"zh-CN",format: 'yyyy-mm-dd',autoclose: true,minView:2})
	.on("click",function(){
        $("input[name='datetimepicker_start']").datetimepicker("setEndDate",$("input[name='datetimepicker_end']").val())
    }).on('changeDate', function(ev){
    	startTime = $("input[name='datetimepicker_start']").val();
    	init();
    });
	$("input[name='datetimepicker_end']").datetimepicker({language:"zh-CN",format: 'yyyy-mm-dd',autoclose: true,minView:2}).on("click",function(){
        $("input[name='datetimepicker_end']").datetimepicker("setStartDate",$("input[name='datetimepicker_start']").val())
    }).on('changeDate', function(ev){
    	endTime = $("input[name='datetimepicker_end']").val();
    	init();
    });
	
	$(".btn-group:eq(0)>button").click(function(){
		var index = $(this).index();
		var now = new Date();
		$(this).removeClass("btn-white").addClass("btn-primary").siblings().removeClass("btn-primary").addClass("btn-white");
		if(index == 0){
			endTime = now.Format("yyyy-MM-dd");
			startTime = endTime;
			groupBy = "hour";
		}else if(index == 1){
			endTime = now.Format("yyyy-MM-dd");
			now.setDate(now.getDate() - 7);
			startTime = now.Format("yyyy-MM-dd");
			groupBy = "day";
		}else if(index == 2){
			endTime = now.Format("yyyy-MM-dd");
			now.setMonth(now.getMonth() - 1);
			startTime = now.Format("yyyy-MM-dd");
			groupBy = "day";
		}else if(index == 3){
			endTime = now.Format("yyyy-MM-dd");
			now.setFullYear(now.getFullYear() - 1);
			startTime = now.Format("yyyy-MM-dd");
			groupBy = "day";
		}else if(index == 4){
			$("input[name='datetimepicker_start']").removeAttr("disabled");
			$("input[name='datetimepicker_end']").removeAttr("disabled");
			groupBy = "day";
			return ;
		}
		$("input[name='datetimepicker_start']").attr("disabled",true);
		$("input[name='datetimepicker_end']").attr("disabled",true);
		$("input[name='datetimepicker_start']").val(startTime);
		$("input[name='datetimepicker_end']").val(endTime);
		
		init();
	});
	
	init();
});

function init(){
	func_countGroupDate();
	func_countGroupCity();
}

/**
 * 分组统计优惠券
 */
function func_countGroupDate(){
	var obj = {startTimeStr:startTime+" 00:00:00",endTimeStr:endTime+" 23:59:59",groupBy:groupBy};
	if($.trim($("#keyWord").val()) != ""){
		obj.couponName = $("#keyWord").val();
	}
	$.post(path+"/coupon/ajaxCountCouponGroupWhere",obj,function(data){
		if(data.status == "200"){
			var jsonObj = {};
			if(groupBy == "hour"){
				jsonObj = func_dealDataGroupHour(data.data);
			}else if(groupBy == "day"){
				jsonObj = func_dealDataGroupDay(data.data);
			}
			func_bar("echarts-bar-chart","柱状图",[],jsonObj.x_data,jsonObj.y_data);
		}
	},"json");
}

function func_countGroupCity(){
	var obj = {startTimeStr:startTime+" 00:00:00",endTimeStr:endTime+" 23:59:59",groupBy:"city",isCountDate:1};
	if($.trim($("#keyWord").val()) != ""){
		obj.couponName = $("#keyWord").val();
	}
    $.post(path+"/coupon/ajaxCountCouponGroupWhere",obj,function(data){
		if(data.status == "200"){
			var jsonObj = [];
			jsonObj = func_dealDataGroupCity(data.data);
			func_pie("container","城市占比","城市占比",null,jsonObj);
		}
	},"json");
}

//处理数据，小时
function func_dealDataGroupHour(list){
	var result = {};
	var x_data = result.x_data = [];
	var y_data = result.y_data = [];
	var now = new Date();
	var nowHour = now.getHours();
	var nowStr = now.Format("yyyyMMdd");
	for(var i = 0; i <= nowHour; i++){
		var key = nowStr;
		if(i<10){
			key += "0"+i;
		}else{
			key += i;
		}
		x_data.push(key.substr(8));
		var isExist = false;
		$.each(list,function(i,d){
			if(key == d.dateStr){
				isExist = true;
				y_data.push(d.count);
				return false;
			}
		});
		if(!isExist){
			y_data.push(0);
		}
	}
	return result;
}
//处理数据，天
function func_dealDataGroupDay(list){
	var result = {};
	var x_data = result.x_data = [];
	var y_data = result.y_data = [];
	var startTimeStrArr = startTime.split("-");
	var endTimeStrArr = endTime.split("-");
	var temp_start = new Date(startTimeStrArr[0],startTimeStrArr[1]-1,startTimeStrArr[2]);
	var temp_end = new Date(endTimeStrArr[0],endTimeStrArr[1]-1,endTimeStrArr[2]);
	for(var i = temp_start.getTime(); i <= temp_end.getTime(); i+= 24*60*60*1000){
		var key = new Date(i).Format("yyyyMMdd");
		x_data.push(key);
		var isExist = false;
		$.each(list,function(i,d){
			if(key == d.dateStr){
				isExist = true;
// 				result[key] = d.count;
				y_data.push(d.count);
				return false;
			}
		});
		if(!isExist){
// 			result[key] = 0;
			y_data.push(0);
		}
	}
	return result;
}
//处理数据，城市
function func_dealDataGroupCity(list){
	var result = [];
	$.each(list,function(i,d){
		var cityName = "其他";
		if(d.cityId != null && d.cityId != ""){
            d.cityId=d.cityId+"000";
			cityName = getNameByCode(d.cityId)
		}
		var temp = {};
		temp.name = cityName;
		temp.value = d.count;
		result.push(temp);
	});
	return result;
}

Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

function func_bar(id,title,legend_data,x_data,y_data){
    var myChart = echarts.init(document.getElementById(id));

    var option = {
  		title: {
			text: title,
			x: 'left'
		},
		tooltip : {
			trigger: 'axis',
	        axisPointer : {
	            type : 'shadow'
	        }
	    },
        legend: {
            data:legend_data,
            orient: 'vertical',
			right:0
        },
        xAxis: {
        	data : x_data
        },
        yAxis: {
        	type : 'value'
        },
//         series: y_data
        series: [{
        	name: "发送量",
        	type: 'bar',
        	data: y_data
        }]
    };
    
	myChart.setOption(option);
	myChart.resize();
}

function func_pie(id,title,pointName,legend_data,value_data){
    var myChart = echarts.init(document.getElementById(id));

    var option = {
   		title: {
   	        text: title,
   	        x: 'left'
   	    },
		tooltip: {
   		    show:false,
			trigger: 'item',
	        formatter: "{a} <br/>{b}: {c} ({d}%)"
	    },
        series: [
        	{
	            name:pointName,
	            type:'pie',
	            radius: ['50%', '70%'],
	            label: {
	                normal: {
	                    show: false,
	                    position: 'center'
	                },
	                emphasis: {
	                    show: false,
	                    textStyle: {
	                        fontSize: '24',
	                        fontWeight: 'bold'
	                    }
	                }
	            },
	            data:value_data
	        }
        ]
    };
    
	myChart.setOption(option);
	myChart.resize();
}
</script>
</html>